<template>
    <div class="goods" style="width: 1000px;margin: auto">

        <a-card hoverable style="width: 300px">
            <template #cover>
                <img
                    alt="example"
                    src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
                />
            </template>
            <template #actions class="ant-card-actions">
                <setting-outlined key="setting"/>
                <a-button v-if="showPayBtn" :loading="loading" @click="startPay">开始支付</a-button>
                <a-button v-else :loading="loading" @click="createOrderAndPay">下单{{ loading ? "中..." : "" }}</a-button>
            </template>
            <a-card-meta title="NV GTX3090" description="价格：7299.00元"></a-card-meta>
        </a-card>
        <a-modal v-model:visible="showPayModal" :footer="null" :closable="false" :maskClosable="false">
            <a-result status="success"  title="支付中...." sub-title="请等待支付通知结果">
                <template #icon>
                    <a-spin size="large"/>
                </template>
                <template #extra>
                </template>
            </a-result>
        </a-modal>
    </div>
</template>

<script>
import {SettingOutlined, EditOutlined, EllipsisOutlined} from '@ant-design/icons-vue';
import axios from "axios";
import {message} from "ant-design-vue";

export default {
    name: "OrderAndPay",
    components: {
        SettingOutlined
    },
    data() {
        return {
            loading: false,
            /**
             * 是否显示支付modal
             */
            showPayModal: false,
            showPayBtn: false,
            orderId: null
        }
    },
    methods: {
        // 只是下单而已
        createOrderAndPay() {
            this.loading = true // 设置加载中...
            axios.get('http://localhost:10110/order/create?id=1&count=1').then(ret => {
                console.log(ret)
                const order = ret.data
                this.orderId = order.id; // 创建订单成功，所以保存订单编号
                this.showPayBtn = true; // 显示支付按钮
            }).catch(e => console.log(e)).finally(() => this.loading = false)
        },
        startPay() {
            this.loading = true // 设置加载中...
            axios.get("http://localhost:10110/order/start-pay?id=" + this.orderId).then(ret=>{
                this.showPayModal = true
                this.checkPayStatus()
                window.open(ret.data.data)
                console.log(ret);
            }).catch(e => console.log(e)).finally(() => this.loading = false)
        },
        checkPayStatus(){
            let timer = setInterval(()=>{
                axios.get("http://localhost:10110/order/status?id=" + this.orderId).then(ret=>{
                    if(ret.data == 'yes') {
                        this.showPayModal = false
                        message.success("支付成功")
                        clearInterval(timer)
                    }
                }).catch(e => console.log(e))
            },3000);
        }
    }
}
</script>

<style scoped>

</style>